<template>
	<div class="top">
		<div class="top_main">
			<div class="logo">待办清单</div>
			<div class="input_box">
				<input type="text" name="" placeholder="添加事项" v-model.trim="inputVal" @keyup.enter="addVal">
				<button type="button" @click="addVal"><i class="icono icono-plus"></i></button>
			</div>
		</div>
	</div>
</template>

<script>
	import eventBus from '../EventBus.js'
	export default {
		name : 'todoTop',
		data () {
			return {
				inputVal : ""
			}
		},
		methods : {
			addVal () {
				// console.log(this.inputVal);
				if(this.inputVal){					
					// this.$emit("acceptVal",this.inputVal);
					if(this.inputVal.indexOf(',') > -1){
						// console.log("有豌豆")
						this.inputVal = this.inputVal.replace(/,/g,'，');
					}
					eventBus.$emit("sendVal",this.inputVal)
					this.inputVal = "";
				}else{
					alert("请输入内容");
					return false;
				}

			}
		}
	}
</script>

<style lang="less" scoped="">
@import '~styles/main.les';
@font-face {
  font-family: 'xiedandan_logo';
  font-display: swap;
  src: url('//at.alicdn.com/t/webfont_fqu54h4xpbw.eot'); /* IE9*/
  src: url('//at.alicdn.com/t/webfont_fqu54h4xpbw.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//at.alicdn.com/t/webfont_fqu54h4xpbw.woff2') format('woff2'),
  url('//at.alicdn.com/t/webfont_fqu54h4xpbw.woff') format('woff'), /* chrome、firefox */
  url('//at.alicdn.com/t/webfont_fqu54h4xpbw.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/webfont_fqu54h4xpbw.svg#思源黑体-极细') format('svg'); /* iOS 4.1- */
}

	.top{
	    height: 60px;
	    background-color: #563d7c;
	    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.1);
	    line-height: 60px;
	    overflow:hidden;
	}
	.top_main{
		max-width: @maxW;
		margin:0 auto;
		color: #fff;
		display: flex;
	}
	.logo{
		font-size: 24px;
		flex: 1;
		text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
		font-family: 'xiedandan_logo';
	}
	.input_box{
		position: relative;
		display: flex;
		flex-wrap: wrap;
		flex: 1;
		margin-top: 10px;
		input,button{
			height: 40px;
    		box-sizing: border-box;
    		// box-sizing: border-box;
    		border: 1px solid #cbbde2;
    		border-radius: .25rem;

    		&:focus {
			    color: #495057;
			    // background-color: #fff;
			    border-color: #fff;
			    outline: 0;
			    box-shadow: 0 0 0 .2rem rgba(255,255,255,.25);
			}
    		
		}
		input{
			    background-color: #fff;
			    background-clip: padding-box;
			    // border: 1px solid #ffe484;
			    
			    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
			        -webkit-box-flex: 1;
			    -ms-flex: 1 1 auto;
			    flex: 1 1 auto;
			    border-top-right-radius: 0;
    		border-bottom-right-radius: 0;
    		padding: 0 10px;
    		// color: #cbbde2;

		}
		button{
			    margin-left: -1px;
			    display: -webkit-box;
			    display: -ms-flexbox;
			    display: flex;
			    color: #6c757d;
			    background-color: transparent;
			    background-image: none;
			    width: 50px;
			    text-align: center;
			    color: #cbbde2;
			    // height: 40px;
			    border-top-left-radius: 0;
    			border-bottom-left-radius: 0;
    			&:hover{
    				background-color: rgba(255,255,255,.1);
    			}
		}
	}

</style>